<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #box {
            width: 110%;
            height: 900px;
            background-color: rgb(244, 244, 244)
        }

        #top {
            margin-left: 50px;
            height: 60px;
            margin-right: 50px;
            font-size: 20px;
        }

        .gengduo {
            margin-left: 1660px;
        }

        .gengduo,
        .shouji {
            line-height:60px;
        }

        #content {
            height: 100%;
            margin-left: 30px;
            float: left;
        }

        #left-image {
            height: 107%;
        }

        #left-content {
            margin-left: 20px;
            height: 85%;
            width: 312px;
            float: left;
        }

        #right-box {
            margin-left: 20px;
            width: 1500px;
            float: left;
        }

        .right-content {
            background-color: white;
            width: 350px;
            height: 400px;
            margin-bottom: 20px;
            margin-right: 20px;
            float: left;
            text-align: center;
        }

        .phoneImage {
            width: 60%;
            margin-top: 10px;
            height: 60%;
            margin-bottom: 20px;
        }

        li {
            list-style: none;
        }

        .gray-li {
            color: gray;
            margin-top: 5px;
            font-size: 13px;
        }

        .price-li {
            color: chocolate;
            margin-top: 15px;
            font-size: 15px
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <template id="root">
        <div id="box">
            <div id="top"><span class="shouji">手机</span><span class="gengduo">查看更多></span></div>
            <div id="content">
                <div id="left-content">
                    <img src="./实验2资源包/实验2资源包/ad1.png" id="left-image">
                </div>
                <div id="right-box">
                    <div class="right-content" v-for="(item,index) in phoneList" :key="item.id">
                        <img :src="item.img" class="phoneImage">
                        <li>{{item.title}}</li>
                        <li class="gray-li">{{item.des}}</li>
                        <li class="price-li">{{item.price}}</li>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        const app = Vue.createApp({
            template: "#root",
            data() {
                return {
                    phoneList: [
                        { id: '100081', img: '实验2资源包/实验2资源包/phone1.png', title: 'Redmi K50 电竞版', des: '全线拉满的冷血旗舰', price: '3299元起' },
                        { id: '100082', img: '实验2资源包/实验2资源包/phone2.png', title: 'Xiaomi 12 Pro', des: '全新骁龙8｜2K AMOLED屏幕', price: '4699元起' },
                        { id: '100083', img: '实验2资源包/实验2资源包/phone3.png', title: 'Xiaomi 12', des: '全新骁龙8｜5000万主摄', price: '3699元起' },
                        { id: '100084', img: '实验2资源包/实验2资源包/phone4.png', title: 'Xiaomi 12X', des: '骁龙870｜5000万主摄', price: '2999元起' },
                        { id: '100084', img: '实验2资源包/实验2资源包/phone5.png', title: 'Xiaomi 11 青春活力版', des: '轻薄5G，内外皆出彩', price: '1899元起' },
                        { id: '100084', img: '实验2资源包/实验2资源包/phone6.png', title: 'Redmi Note 11 Pro系列', des: '三星AMOLED高刷屏', price: '1799元起' },
                        { id: '100084', img: '实验2资源包/实验2资源包/phone7.png', title: 'Redmi Note 11 5G', des: '5000mAh大电量', price: '1199元起' },
                        { id: '100084', img: '实验2资源包/实验2资源包/phone8.png', title: 'Redmi Note 11 4G', des: '5000mAh大电量', price: '969元起' },

                    ]
                }
            }
        })

        const root = app.mount("#app")
    </script>
</body>

</html>